<template>
    <view class="flex-layout-col house-cell shadow">
        <view class="flex-layout-row" style="width: 100%;position: relative;" @click="navigator">
            <view class="house-cell-image">
                <image :src="detail.logo" style="width: 86px; height: 86px"></image>
            </view>
			<view class="preview" @click.stop="handlePreview(detail.id)">
				{{ $t('text.comment') }} list
			</view>
            <view class="house-cell-footer flex-layout-col">
                <view class="house-cell-name gap-col h3">
                    <u--text :lines="2" color="#999" size="12px" :text="detail.title"></u--text>
                </view>
                <location :address="detail.address" :city="detail.cityId" :mapname="detail.mapname" :latitude="detail.latitude" :longitude="detail.longitude"></location>
            </view>
        </view>
        <view class="gap-col-top flex-layout-row" style="justify-content: flex-end; width: 100%">
            <u-button icon="edit-pen-fill" @click="handleEdit(detail.id)" type="primary" text="Edit"></u-button>
            <u-button icon="trash-fill" @click="handleDelete(detail.id)" class="gap-row-left2" type="error" text="Delete"></u-button>
        </view>
    </view>
</template>

<script>
import { showMessage, showSuccess } from '../../lib/helper';
import { removeHouse } from '../../lib/service';
export default {
    name: 'house-cell',
    props: {
        detail: Object
    },
    data() {
        return {};
    },

    computed: {},

    methods: {
        handleEdit(id) {
            uni.setStorageSync('location',null)
            uni.navigateTo({
                url: '/pages/edit-house/edit-house?id=' + id
            });
        },
        handleDelete(id) {
            uni.showModal({
                cancelText: this.$t('text.cancel'),
                confirmText: this.$t('text.confirm'),
                content: this.$t('text.delete.tip'),
                success: function (res) {
                    if (res.confirm) {
                        uni.showLoading();
                        removeHouse(id)
                            .then((res) => {
                                showSuccess();
                                uni.hideLoading();
                                this.$emit('update');
                            })
                            .catch((err) => {
                                showMessage(err);
                            });
                    }
                }
            });
        },
        navigator(e) {
            uni.navigateTo({
                url: '/pages/detail/detail?id=' + id
            });
        },
		handlePreview(id){
			uni.navigateTo({
			    url: '/pages/review/review-list?houseid=' + id
			});
		}
    }
};
</script>

<style lang="scss" scoped>
.house-cell {
    position: relative;
    margin-bottom: 20px;

    flex-shrink: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #fff;
    align-items: center;
	.preview{
		position: absolute;
		top: 0;
		right: 0;
		width: 147rpx;
		height: 42rpx;
		border-radius: 21rpx;
		border: 0.5px solid #838383;
		font-size: 24rpx;
		color: #838383;
		text-align: center;
		line-height: 42rpx;
	}
    &-image {
        flex-shrink: 0;
    }
    &-footer {
    width: 70%;
        padding-left: $uni-spacing-row-base;
        justify-content: space-between;
    }
    &-title {
        justify-content: space-between;
    }
    &-name {
        width: 100%;
        align-items: center;
    }
    &-info {
        justify-content: space-between;
        align-items: center;
    }

    &-address,
    &-title {
        color: #8e8e8e;
    }
    &-price {
        color: #0066ff;
    }
}
</style>
